<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>
                    Thymeleaf Index Page
                </h3>
            </div>
        </div>

        <div class="clearfix"></div>
        <h3>Hello World!!!</h3>

        <h6>====== 下载图片 ======</h6>
        <a href="/test/file?fileName=bronya布洛妮娅.jpg">下载</a>


        <h6>====== 上传图片 ======</h6>
        <p th:text="${message}"></p>
        <form action="/test/file" method="post" enctype="multipart/form-data">
            <input type="file" name="file" />
            <input type="submit" value="上传" />
        </form>


        <h6>====== th:text ======</h6>
        <span th:text="${name}"></span>

        <h6>====== th:if,th:unless ======</h6>
        <p th:if="${checked} == true">Young people</p>
        <!-- 下句如果后面表达式为false显示 -->
        <p th:unless="${checked} == false">Young people</p>
        <p th:if="${currentNumber}&lt;100">小于100</p>
        <p th:if="${thymeleafTitle} == null">Title is null</p>
        <p th:if="${thymeleafTitle} != null">Title is not null</p>

        <h6>====== 标签属性的设置 ======</h6>
        <input type="checkbox" th:checked="${checked}">Checkbox
        <img th:src="${src}">
        <a th:href="${href}">bilibili</a>
        <a th:href="@{'/api/city/' + ${city.cityId}}">路径参数</a>
        <a th:href="@{/api/city(cityName=${city.cityName},
        localCityName=${city.localCityName})}">查询参数</a>

        <h6>====== th:object ======</h6>
        <!-- *号的方式必须满足在object的包内 -->
        <div th:object="${city}">
            <span th:text="${city.cityName}"></span>
            <span th:text="*{cityName}"></span>
        </div>

        <h6>====== th:each ======</h6>
        <ul th:each="city : ${cities}">
            <li th:text="${city.cityName}"></li>
        </ul>
        <table>
            <thead>
                <tr>
                    <td>ID</td>
                    <td>CityName</td>
                </tr>
            </thead>
            <tbody>
                <tr th:each="city : ${cities}">
                    <td th:text="${city.cityId}"></td>
                    <td th:text="${city.cityName}"></td>
                </tr>
            </tbody>
        </table>
        <select>
            <option th:each="city : ${cities}" th:value="${city.cityId}" th:text="${city.cityName}"></option>
        </select>

        <h6>====== form 表单 ======</h6>
        <!--
        在处理页面表单时，有的浏览器并不支持 PUT 请求，SpringMVC 为我们提供了一种解决方案：
        全局配置开启 hidden method：spring.mvc.hiddenmethod.filter.enabled=true
        并且在表单中添加 hidden 指定 method
    -->
        <form action="/api/city" method="post" th:object="${city}">
            <input type="hidden" name="_method" value="PUT" />
            <p><input th:value="${city.cityId}" name="cityId"></p>
            <p><input th:value="${city.cityName}" name="cityName"></p>
            <p><input th:value="${city.localCityName}" name="localCityName"></p>
            <p><input type="submit" value="提交" /></p>
        </form>

        <h6>====== th:replace ======</h6>
        <div th:replace="test/temp"></div>
    </div>
</div>
<!-- /page content -->